<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-07-20 15:21:22
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-08-30 16:49:00
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="form-huawei"
    :rules="rules"
    :model="form"
    label-width="auto"
    size="medium"
  >
    <el-form-item class="item" label="云服务商" prop="cloudProvider">
      <el-select
        v-model="form.cloudProvider"
        placeholder="请选择云服务商"
        style="width: 100%"
        :disabled="true"
      >
        <el-option
          v-for="item in cloudProviderOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item right" label="云账户" prop="cloudAccountName">
      <el-select
        v-model="form.cloudAccountName"
        placeholder="请选择云账户"
        style="width: 100%"
        no-data-text="请先选择合适的云服务商"
        :loading="loadingCloudAccountName"
        :disabled="formType === 2"
      >
        <el-option
          v-for="item in cloudAccountNameOptions"
          :key="item.cloudAccountName"
          :label="item.cloudAccountName"
          :value="item.cloudAccountName"
        />
      </el-select>
    </el-form-item>
    <template v-if="formType === 1">
      <el-form-item class="item" label="区域" prop="cpRegionId">
        <el-select
          v-model="form.cpRegionId"
          placeholder="请选择区域"
          no-data-text="请选择合适的云服务商"
          style="width: 100%"
        >
          <el-option
            v-for="item in regionOptions"
            :key="item.cpId"
            :label="item.desc"
            :value="item.cpId"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="item right" label="可用区" prop="zone">
        <el-select
          v-model="form.zone"
          placeholder="请选择可用区"
          no-data-text="请先选择区域"
          style="width: 100%"
        >
          <el-option
            v-for="item in zoneOptions"
            :key="item.key"
            :label="item.text"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否挂载" prop="attach">
        <el-radio-group
          v-model="form.attach"
          size="small"
          @input="attachChange"
        >
          <el-radio
            v-for="item in attachOptions"
            :key="item.value"
            class="radio"
            :label="item.value"
            border
          >{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 挂载 需要选择实例 -->
      <el-form-item v-if="form.attach" label="实例" prop="vmId">
        <el-row type="flex" align="middle">
          <el-select
            v-model="form.vmId"
            placeholder="请选择实例"
            no-data-text="请先选择云账户及合适的可用区"
            style="flex: 4"
          >
            <el-option
              v-for="item in vmOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-row>
        <div v-if="vmDetail" class="vmDetail">
          实例付费模式：{{ vmDetail.chargeType }}
        </div>
      </el-form-item>
      <el-form-item class="item" label="计费方式" prop="chargeType">
        <el-radio-group v-model="form.chargeType" size="small">
          <el-radio
            v-for="item in chargeTypeOptions"
            :key="item.value"
            class="radio"
            :label="item.value"
            :disabled="chargeTypeDisabled(item.label)"
            border
          >{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="item right" label="是否加密" prop="encrypted">
        <el-radio-group v-model="form.encrypted" size="small">
          <el-radio
            v-for="item in encryptedOptions"
            :key="item.value"
            :label="item.value"
          >{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="云盘" prop="type">
        <el-row type="flex" justify="center">
          <el-select
            v-model="form.type"
            placeholder="请选择云盘"
            style="flex: 1; margin-right: 10px"
          >
            <el-option
              v-for="item in sysDiskTypeOptions"
              :key="item.zhName"
              :label="item.zhName"
              :value="item.zhName"
            />
          </el-select>
          <el-input-number
            v-model="form.size"
            style="flex: 1"
            :min="20"
            :max="500"
            :precision="0"
            label="云盘大小"
          />
          <span style="margin-left: 10px">GB</span>
        </el-row>
      </el-form-item>
    </template>
    <el-form-item label="描述" prop="desc">
      <el-input
        v-model="form.desc"
        placeholder="请输入描述"
        type="textarea"
        :rows="3"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import resSelectorMixin from '@/views/mixin/resSelector.js'
import {
  getRegionList,
  getAttachStorageBlockVms,
  getBlockVolumeType
} from '@/api/cn-resource'

export default {
  name: 'FormHuawei',
  components: {},
  mixins: [resSelectorMixin],
  props: {
    cloudSelect: {
      type: String,
      default: '华为云'
    },
    formType: {
      type: Number,
      default: 1 // 1-创建 2-编辑
    },
    updateInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      skipGetCloudAccount: false,
      cloudProviderType: 'public',
      attachOptions: [
        {
          label: '暂不挂载',
          value: false
        },
        {
          label: '挂载到云服务器',
          value: true
        }
      ],
      chargeTypeOptions: [
        {
          label: '按需计费',
          value: '按需计费'
        },
        {
          label: '包年/包月',
          value: '包年/包月'
        }
      ],
      regionOptions: [],
      zoneOptions: [],
      vmOptions: [],
      vmDetail: null,
      encryptedOptions: [
        {
          label: '否',
          value: false
        },
        {
          label: '是',
          value: true
        }
      ],
      sysDiskTypeOptions: [],
      form: {
        cloudProvider: '',
        cloudAccountName: '',
        attach: false, // 是否挂载
        cpRegionId: '', // 区域
        zone: '', // 可用区
        vmId: '',
        chargeType: '按需计费', // 付费方式
        encrypted: false, // 是否加密
        type: '', // 云盘类型
        size: '1', // 云盘大小
        desc: ''
      },
      // 校验规则
      rules: {
        cloudProvider: [
          { required: true, message: '请选择云平台', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请选择云账户', trigger: 'change' }
        ],
        attach: [
          { required: true, message: '请选择是否挂载', trigger: 'change' }
        ],
        cpRegionId: [
          { required: true, message: '请选择区域', trigger: 'change' }
        ],
        zone: [{ required: true, message: '请选择可用区', trigger: 'change' }],
        vmId: [{ required: true, message: '请选择实例', trigger: 'change' }],
        chargeType: [
          { required: true, message: '请选择计费方式', trigger: 'change' }
        ],
        encrypted: [
          { required: true, message: '请选择是否加密', trigger: 'change' }
        ],
        type: [{ required: true, message: '请选择云盘', trigger: 'change' }]
      }
    }
  },
  computed: {
    /**
     * @description: 云盘相关参数
     * @return {*}
     */
    sysDiskTypeParam() {
      return {
        cloudAccountName: this.form.cloudAccountName,
        cpRegionId: this.form.cpRegionId,
        zone: this.form.zone
      }
    },
    /**
     * @description: 实例相关参数
     * @return {*}
     */
    vmIdParams() {
      return {
        cloudAccountName: this.form.cloudAccountName,
        cpRegionId: this.form.cpRegionId,
        zone: this.form.zone
      }
    }
  },
  watch: {
    formType: {
      handler(newVal) {
        if (newVal === 2) {
          this.skipGetCloudAccount = true
          const updateInfo = JSON.parse(JSON.stringify(this.updateInfo))
          this.form.id = updateInfo.id
          this.form.cloudProvider = updateInfo.cloudProvider
          this.form.cloudAccountName = updateInfo.cloudAccountName
          this.form.attach = updateInfo.attach || false
          this.form.cpRegionId = updateInfo.region
          this.form.zone = updateInfo.zone
          this.form.vmId = updateInfo.vmName
          this.form.chargeType = updateInfo.chargeType
          this.form.encrypted = updateInfo.encrypted || false
          this.form.type = updateInfo.type
          this.form.size = updateInfo.size
          this.form.desc = updateInfo.desc
        }
      },
      immediate: true
    },
    /**
     * @description: 实例监听
     * @return {*}
     */
    'form.vmId': {
      handler(newVal) {
        if (newVal && this.formType === 1) {
          const vmSelect = this.vmOptions.find((item) => {
            return newVal === item.id
          })
          if (vmSelect && vmSelect.chargeType) {
            this.form.chargeType = vmSelect.chargeType
          }
          this.vmDetail = vmSelect
        } else {
          this.vmDetail = null
        }
      },
      immediate: true
    },
    /**
     * @description: 监听云盘相关参数
     * @return {*}
     */
    sysDiskTypeParam: {
      handler(newVal) {
        if (this.formType === 1) {
          this.form.type = ''
          this.sysDiskTypeOptions = []
          if (
            this.form.cloudAccountName &&
            this.form.cpRegionId &&
            this.form.zone
          ) {
            this.getDiskType()
          }
        }
      },
      immediate: true,
      deep: true
    },
    /**
     * @description: 监听实例相关参数
     * @return {*}
     */
    vmIdParams: {
      handler(newVal) {
        if (this.formType === 1) {
          this.form.vmId = ''
          this.vmOptions = []
          if (
            this.form.cloudAccountName &&
            this.form.cpRegionId &&
            this.form.zone
          ) {
            this.getVmList()
          }
        }
      },
      immediate: true,
      deep: true
    },
    /**
     * @description: 区域监听
     * @return {*}
     */
    'form.cpRegionId': {
      handler(newVal) {
        if (newVal && this.formType === 1) {
          const regionSelect = this.regionOptions.find((item) => {
            return newVal === item.cpId
          })
          // 设置可用区
          if (regionSelect && Array.isArray(regionSelect.zones)) {
            this.zoneOptions = regionSelect.zones.filter((item) => {
              return item.val
            })
          } else {
            this.zoneOptions = []
          }
          this.form.zone = ''
        } else {
          this.zoneOptions = []
        }
      },
      immediate: true
    },
    /**
     * @description: 云商监听
     * @return {*}
     */
    'form.cloudProvider': {
      handler(newVal) {
        if (newVal && this.formType === 1) {
          // 获取区域
          this.form.cpRegionId = ''
          this.form.zone = ''
          this.getRegionList()
        }
      },
      immediate: true
    },
    cloudSelect: {
      handler(newVal) {
        if (newVal && this.formType === 1) {
          this.form.cloudProvider = this.cloudSelect
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 获取云盘类型
     * @return {*}
     */
    getDiskType() {
      getBlockVolumeType({
        cloudProvider: this.form.cloudProvider,
        cloudAccountName: this.form.cloudAccountName,
        cpRegionId: this.form.cpRegionId,
        cpZoneId: this.form.zone
      }).then((res) => {
        this.sysDiskTypeOptions = Array.isArray(res.data) ? res.data : []
      })
    },
    /**
     * @description: 计费方式选项是否disabled
     * @param {*} chargeTypeLabel
     * @return {*}
     */
    chargeTypeDisabled(chargeTypeLabel) {
      if (!this.form.attach && chargeTypeLabel === '包年/包月') {
        // 暂不挂载 则 包年包月 选项是disabled
        return true
      }
      if (
        this.form.attach &&
        this.vmDetail &&
        chargeTypeLabel !== this.vmDetail.chargeType
      ) {
        // 挂载 且 选择了实例 则和实例计费方式不一样的选项是disabled
        return true
      }
      return false
    },
    /**
     * @description: 获取可挂载云主机
     * @return {*}
     */
    getVmList() {
      getAttachStorageBlockVms({
        cloudProvider: this.form.cloudProvider,
        cloudAccountName: this.form.cloudAccountName,
        cpRegionId: this.form.cpRegionId,
        cpZoneId: this.form.zone
      })
        .then((res) => {
          this.vmOptions = Array.isArray(res.data) ? res.data : []
        })
        .finally(() => {
          this.loadingVm = false
        })
    },
    /**
     * @description: 是否挂载
     * @param {*} val
     * @return {*}
     */
    attachChange(val) {
      if (val) {
        this.form.vmId = ''
      } else {
        this.form.chargeType = '按需计费'
      }
    },
    /**
     * @description: 获取区域
     * @return {*}
     */
    getRegionList() {
      getRegionList({
        keyword: this.form.cloudProvider,
        pageNum: 1,
        pageSize: 100
      }).then((res) => {
        if (res.data) {
          this.regionOptions = Array.isArray(res.data.data)
            ? res.data.data
            : []
        } else {
          this.regionOptions = []
        }
      })
    },
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          callback(this.form)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.form-huawei {
  .item {
    display: inline-block;
    width: calc(50% - 10px);
    &.right {
      margin-left: 20px;
    }
  }
  .vmDetail {
    line-height: 22px;
    margin: 5px 0 0 15px;
    color: #999;
  }
  .radio {
    margin-right: 10px;
  }
}
</style>
